<template>
    <div class="userCenter">
        <assets-head :goHome="goHome">
            <van-icon class="font-45" @click="tokefu" :name="require(`@/assets/image/customer.png`)"
                :badge="`${unreadMsg_num}`">
            </van-icon>
        </assets-head>
        <div class="top" v-if="!userInfo.token">
            <div class="title textColor ">{{ $t('欢迎来到') }}{{ TITLE }}</div>
            <p class="">{{ $t('全球最大的区块链资产平台') }}</p>
            <div class="btnBox">
                <div class="btn btnBackground" @click="$router.push('/register')">{{ $t('注册') }}</div>
                <div class="btn btnMain" @click="$router.push('/login')">{{ $t('登录') }}</div>
            </div>
        </div>
        <div class="userInfo" v-else>
            <div class="imgBox"><img :src="require(`@/assets/theme/${theme}/image/Group.png`)" alt=""></div>
            <div class="info">
              <p class="textColor break-word">
                {{ status === 2 ? name : userInfo.username }}
                <span class="ml-10 red">{{ userInfo.userrole == 'TEST' ? `(${$t('试用账户')})` : '' }}</span>
              </p>
              <span>UID:{{ userInfo.usercode }}</span>
            </div>
        </div>
        <div class="content">
            <list-box v-if="userInfo.token" :title="$t('安全')" :listData="safeList"></list-box>
            <list-box v-if="userInfo.token" :title="$t('用户')" :status="status" :kycHighStatus="kycHighStatus" :listData="userList" :c2cStatus="c2cStatus"></list-box>
            <list-box :title="$t('通用')" :listData="list">
            </list-box>
            <list-box :title="$t('更多')" :listData="moreList"></list-box>
<!--            <list-box v-if="userInfo.token" :listData="moniList"></list-box>-->
            <div v-if="$store.state.user.userInfo.token">
                <div class="outBtn tabBackground textColor" @click="loginOut">{{ $t('退出') }}</div>
                <div class="tips">{{ $t('请不要透漏密码、短信和谷歌验证码给任何人，包括交易所的工作人员。') }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import listBox from "./listBox.vue";
import { mapGetters } from "vuex";
import { _getIdentify } from '@/API/fund.api'
import { setStorage } from '@/utils/utis'
import { _getUnreadMsg } from '@/API/im.api'
import Axios from '@/API/userCenter'
import AxiosLogin from '@/API/login'
export default {
    props: {

    },
    components: {
        assetsHead,
        listBox
    },
    computed: {
        ...mapGetters({
            userInfo: 'user/userInfo',
            theme: 'home/theme'
        }),
    },
    data() {
        return {
            goHome: true,
            status: -1,//身份认证状态
            kycHighStatus:-1,
            list: [
                {
                    name: this.$t('语言'),
                    icon: require('@/assets/image/userCenter/yuyan.png'),
                    url: '/language'
                },
                {
                    name: this.$t('计价方式'),
                    icon: require('@/assets/image/userCenter/jisuan.png'),
                    url: '/exchangeRate'
                },
                {
                    name: this.$t('在线客服'),
                    icon: require('@/assets/image/userCenter/kefu.png'),
                    url: '/customerService'
                },
                {
                    name: this.$t('主题模式'),
                    icon: require('@/assets/image/userCenter/theme.png'),
                    url: '/themeModel'
                }
            ],
            moreList: [
                {
                    name: this.$t('帮助中心'),
                    icon: require('@/assets/image/userCenter/help.png'),
                    url: '/helpCenter'
                },
                {
                    name: this.$t('关于我们'),
                    icon: require('@/assets/image/userCenter/about.png'),
                    url: '/TermsOfService'
                }
            ],
            safeList: [
                {
                    name: this.$t('安全'),
                    icon: require('@/assets/image/userCenter/security.png'),
                    url: '/safety'
                },
                {
                    name: this.$t('修改密码'),
                    icon: require('@/assets/image/userCenter/password.png'),
                    url: '/changePassword'
                }
            ],
            userList: [
                {
                    name: this.$t('邀请推广'),
                    icon: require('@/assets/image/userCenter/share.png'),
                    url: '/promote'
                },
                {
                    name: this.$t('账变记录'),
                    icon: require('@/assets/image/userCenter/record.png'),
                    url: '/accountChange'
                },
                {
                    name: this.$t('初级认证'),
                    icon: require('@/assets/image/userCenter/identity.png'),
                    url: '/authentication'
                },
                {
                  name: this.$t('高级认证'),
                  icon: require('@/assets/image/userCenter/highIdentity.png'),
                  url: '/advancedCtf'
                },
/*                {
                  name: this.$t('c2c认证'),
                  icon: require('@/assets/image/userCenter/c2c.png'),
                  url: '/c2cCertification'
                },*/
            ],
            moniList: [
                {
                    name: this.$t('试用账户'),
                    icon: require('@/assets/image/userCenter/testDemo.png'),
                    url: '/test'
                },
            ],
            name: "", //实名认证的真实名字
            unreadMsg_num: '',
            c2cStatus: -1,
        }
    },
    mounted() {
        if (this.userInfo.token) {
            this.getIdentify()
            this.fetchUnread()
            this.getKycHighLevel()
            // this.getC2cInfo(); // 获取c2c认证信息
        }
    },
    methods: {
        getC2cInfo(){
          Axios._getC2cCtfInfo()
              .then(res=>{
                this.c2cStatus = res.data.status
              })
        },
        fetchUnread() { // 获取未读
            _getUnreadMsg().then(unread_num => {
                this.unreadMsg_num = (unread_num * 1 > 0) ? unread_num * 1 : '';
                //console.log('\n *** \n'+unread_num*1+'\n *** \n')
            })
        },
        loginOut() {
          AxiosLogin.loginOut().then(res=>{
            this.$store.commit('user/SET_OUT')
            setStorage('popNotice', false)
          }).catch(err=>{
            this.$store.commit('user/SET_OUT')
            setStorage('popNotice', false)
          })
          localStorage.removeItem("verifyData");
        },
        getIdentify() {
            _getIdentify().then(data => {
                this.status = data.status
                this.name = data.name
            })
        },
      //高级认证状态显示
        getKycHighLevel(){
           Axios.getKycHighLevel().then(data=>{
              this.kycHighStatus = data.data.status
            })
          },
        tokefu() {
            this.$router.push('/customerService')
        }
    },

}
</script>

<style lang="scss" scoped>
.userCenter {
    font-size: 26px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.top {
    padding: 0 32px;

    p {
        color: #868D9A;
    }
}

.content {
    font-size: 30px;
}

.custom {
    width: 44px;
    height: 44px;

    img {
        width: 100%;
        height: 100%;
    }
}

.title {
    font-weight: 700;
    font-size: 52px;
    margin-top: 54px;
    margin-bottom: 22px;
}

.btnBox {
    display: flex;
    justify-content: space-between;
    margin-top: 44px;
    margin-bottom: 35px;

    .btn {
        color: #fff;
        width: 364px;
        height: 88px;
        line-height: 88px;
        font-size: 35px;
        border-radius: 8px;
        text-align: center;
    }
}

.outBtn {
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 32px;
    border-radius: 10px;
    margin: 0 32px;
    margin-top: 44px;
}

.tips {
    color: #868D9A;
    margin-top: 34px;
    text-align: center;
    padding: 0 13%;
    display: flex;
    justify-content: center;
}

.userInfo {
    padding: 32px 32px 44px 32px;
    display: flex;

    .imgBox {
        width: 96px;
        height: 96px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .info {
        margin-left: 22px;
        display: flex;
        flex-direction: column;
        justify-content: center;

        p {
            margin-bottom: 10px;
            font-size: 36px;
            font-weight: 700;
        }

        span {
            color: #868D9A;
            font-size: 22px;
        }
    }
}
.red{
  color: #E35561 !important;
}
</style>